<template>
  <div>
    <h1>shallowReactive() & shallowReadonly()</h1>
    <div>
      <div class="group">
        <button type="button" @click="editshallowReactive">修改shallowReactive</button>
      </div>
      <div class="group">
        {{ slrdataObj3.count }}
      </div>
      <div class="group">
        <ul>
          <li v-for="item in slrdataObj3.strArr" :key="item">{{ item }}</li>
        </ul>
      </div>
      <div class="group">
        <ul>
          <li v-for="(item, name) in slrdataObj3.user" :key="name">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo6'
}
</script>
<script setup lang="ts">
import { isProxy, shallowReactive, shallowReadonly, triggerRef } from 'vue'

let dataObj3 = {
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '许家印',
    sex: 'nan',
    age: 42,
    aihao: {}
  }
}

let slrdataObj3 = shallowReactive(dataObj3)

let slrydataObj3 = shallowReadonly(slrdataObj3)

console.log(isProxy(slrdataObj3))
console.log(isProxy(slrydataObj3))

const editshallowReactive = () => {
  // 修改第一层
  // slrdataObj3.count++
  // slrdataObj3.strArr = ['234', '234']
  // slrdataObj3.user = {
  //   name: '许家印3333',
  //   sex: 'nan',
  //   age: 42,
  //   aihao: {}
  // }

  // 修改不是第一层
  slrdataObj3.user.name = '廖文静'

  // slrydataObj3.user.name = '廖文静'

  // 无法为“user”赋值，因为它是只读属性
  // slrydataObj3.user = {
  //   name: '许家印3333',
  //   sex: 'nan',
  //   age: 42,
  //   aihao: {}
  // }
}

// slrydataObj3.count = 2323 // 无法为“count”赋值，因为它是只读属性。
</script>

<style lang="scss" scoped>
.group {
  padding: 20px;
  border: 2px solid #abcdef;
  margin: 10px 0;
}
</style>
